{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto;
        margin: 10px 0;
    }
    .dataTable {
        min-width: 1600px;
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;
        text-align: center;
    }
    .sortable {
        cursor: pointer;
    }
    .filter-group {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .label {
        display: inline-block;
        margin: 0 2px;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
    }
    .label-pending {
        background-color: #FFC107;
        color: black;
    }
    .label-processed {
        background-color: #4CAF50;
        color: white;
    }
    .label-rejected {
        background-color: #f44336;
        color: white;
    }
    .search-container .form-control {
        width: 34px;  /* 宽度与高度相等，实现正方形 */
        height: 34px; /* 固定高度，与按钮保持一致 */
        padding: 0 12px; /* 调整内边距避免内容溢出 */
        border-radius: 4px 0 0 4px;
    }
    .search-container .input-group-btn .btn {
        height: 34px; /* 与搜索框高度完全一致 */
    }
</style>
<script>
    // 全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selall = document.getElementById('selall');
        const checkboxes = document.querySelectorAll('input[name="ids"]');
        
        selall.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    });
</script>
<section class="content-header">
    <h1>营养顾问建议管理 <small>建议列表</small></h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">建议管理</a></li>
        <li class="active">建议列表</li>
    </ol>
</section>
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">建议列表</h3>
        </div>
        <div class="box-body">
            <div class="filter-group">
                <!-- 筛选表单 -->
                <form action="{% url 'myadmin_nutritionistadvice_index' 1 %}" method="get" class="form-inline">
                    <!-- 状态筛选 -->
                    <select name="status" class="form-control input-sm" onchange="this.form.submit()">
                        <option value="">所有状态</option>
                        {% for status in status_choices %}
                        <option value="{{ status.0 }}" {% if selected_status == status.0 %}selected{% endif %}>
                            {{ status.1 }}
                        </option>
                        {% endfor %}
                    </select>

                    <!-- 日期筛选 -->
                    <input type="date" name="nutritionistadvice_date" class="form-control input-sm" 
                           value="{{ selected_date }}" onchange="this.form.submit()">

                    <!-- 搜索框 -->
                    <div class="input-group input-sm search-container" style="margin-left: 10px; width: 220px;">
                        <input type="text" name="keyword" class="form-control" placeholder="搜索用户/顾问/内容" 
                               value="{{ request.GET.keyword|default:'' }}">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </div>
            <div class="table-box">
                <table class="table table-bordered table-striped dataTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selall"></th>
                            <th class="sortable">
                                <a href="?sort=advice_id&order={% if request.GET.sort == 'advice_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    建议ID{% if request.GET.sort == 'advice_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=user__username&order={% if request.GET.sort == 'user__username' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    关联用户{% if request.GET.sort == 'user__username' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=nutritionist__username&order={% if request.GET.sort == 'nutritionist__username' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    营养顾问{% if request.GET.sort == 'nutritionist__username' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>建议内容</th>
                            <th class="sortable">
                                <a href="?sort=advice_date&order={% if request.GET.sort == 'advice_date' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    建议日期{% if request.GET.sort == 'advice_date' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=status&order={% if request.GET.sort == 'status' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    状态{% if request.GET.sort == 'status' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for vo in advicelist %}
                        <tr>
                            <td><input type="checkbox" name="ids" value="{{ vo.advice_id }}"></td>
                            <td>{{ vo.advice_id }}</td>
                            <td>{{ vo.user.username }}</td>
                            <td>{{ vo.nutritionist.username }}</td>
                            <td>{{ vo.advice_content|truncatechars:30 }}</td>
                            <td>{{ vo.advice_date|date:"Y-m-d" }}</td>
                            <td>
                                {% if vo.status == 'pending' %}
                                    <span class="label label-pending">待处理</span>
                                {% elif vo.status == 'processed' %}
                                    <span class="label label-processed">已反馈</span>
                                {% else %}
                                    <span class="label label-rejected">已拒绝</span>
                                {% endif %}
                            </td>
                            <td>
                                <a href="{% url 'myadmin_nutritionistadvice_feedback' vo.advice_id %}" class="btn btn-xs btn-primary">反馈处理</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="8">暂无建议数据</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- 分页控件 -->
            <div class="box-footer">
                <div class="box-tools pull-right">
                    <ul class="pagination">
                        <li><a href="{% url 'myadmin_nutritionistadvice_index' pIndex|add:-1 %}?{{ request.GET.urlencode }}">&laquo;</a></li>
                        {% for p in plist %}
                        <li {% if p == pIndex %}class="active"{% endif %}>
                            <a href="{% url 'myadmin_nutritionistadvice_index' p %}?{{ request.GET.urlencode }}">{{ p }}</a>
                        </li>
                        {% endfor %}
                        <li><a href="{% url 'myadmin_nutritionistadvice_index' pIndex|add:1 %}?{{ request.GET.urlencode }}">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}